<template>
  <div class="w-full h-full">
    <el-upload ref="upload" v-model:file-list="fileList" :headers="{
      token
    }" :auto-upload="true" :data="data" name="file" :action="uploadUrl" :limit="limit" multiple
      :on-preview="handlePreview" :on-remove="handleRemove" :before-upload="beforeUpload" :before-remove="beforeRemove"
      :on-exceed="handleExceed" :on-success="onSuccess">

      <div class="w-full h-full">
        <el-button type="primary">选择文件</el-button>
      </div>

      <template #tip>
        <div class="el-upload__tip" v-if="tip">
          {{ tip }}
        </div>
      </template>
    </el-upload>

  </div>
</template>

<script setup lang="ts">
import { uploadUrl } from '@/api/upload'
import { getStorage } from '@/utils/storage'
import { message } from "@/utils/message";
import { genFileId } from 'element-plus'
import type { UploadProps, UploadUserFile, UploadInstance, UploadRawFile } from 'element-plus'
import { ref, withDefaults, watch } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const token = getStorage('token')


interface ispic {
  ispic: string
}

interface Props {
  data?: ispic
  limit?: number
  tip?: string
  modelValue: Array
  type?: string
}

const props = withDefaults(defineProps<Props>(), {
  limit: 1,
  data: () => ({ ispic: '1' }),
  modelValue: () => [],
  tip: '',
  type: 'pdf'
})

const emits = defineEmits(['success', "update:modelValue", "onPreviewFn"])


const upload = ref<UploadInstance>()


const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
  console.log(file, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
  window.open(fileList.value[0].url)
  // let link = document.createElement("a")
  // link.style.display = "none"
  //  link.href = fileList.value[0].url
  // let filename = fileList.value[0].name
  // link.setAttribute("download",filename)
  // document.body.appendChild(link)
  // link.click()
}

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
  ElMessage.warning(
    `超出最大上传量，请先移除再上传`
  )
}

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
  // return ElMessageBox.confirm(
  //   `Cancel the transfer of ${uploadFile.name} ?`
  // ).then(
  //   () => true,
  //   () => false
  // )
}

const beforeUpload: UploadProps['beforeUpload'] = (uploadFile, uploadFiles) => {

  // if (props.type === 'pdf') {
  //   if (uploadFile.type !== 'application/pdf') {
  //     ElMessageBox.confirm(
  //       `请上传pdf文件`
  //     )
  //     return false
  //   }
  // }

}

const onSuccess = (response, uploadFile, uploadFiles) => {
  console.log(response, 'response')
  fileList.value = [{
    name: response.data.result.name,
    url: response.data.result.address
  }]
}

function size2Str(size) {
  if (size < 1024) {
    return size + 'B';
  } else if (size >= 1024 && size < Math.pow(1024, 2)) {
    return parseFloat(size / 1024).toFixed(2) + 'KB';
  } else if (size >= Math.pow(1024, 2) && size < Math.pow(1024, 3)) {
    return parseFloat(size / Math.pow(1024, 2)).toFixed(2) + 'MB';
  } else if (size > Math.pow(1024, 3)) {
    return parseFloat(size / Math.pow(1024, 3)).toFixed(2) + 'GB';
  } else {
    return 0 + 'B';
  }
}




const fileList = ref<UploadUserFile[]>([...props.modelValue])


// const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
//   console.log(uploadFile, uploadFiles)
// }


watch(fileList, newValue => {
  console.log(newValue, 'newValue111')
  emits("update:modelValue", newValue)
}, {
  deep: true
});

</script>